import React from "react";
import List from './List';

class App extends React.Component {
  state = {content:'',list:[],num:0};
  handleChange = (e,type)=>{
    this.setState({[type]:e.target.value});
  }
  submitContent = ()=>{
    if(this.state.content){
      this.setState({
        list:[...this.state.list,{"content":this.state.content,"id":this.state.num++,"isSelect":false}],
        content:''
      })
    }
  }
  deleteContent = (paras)=>{
    this.setState({
      list:this.state.list.filter(
        item=>paras!=item.id
      )
    })
  }
  changeIsSelect = (paras)=>{
    this.setState({
      list: this.state.list.filter(
        item => {
          if(paras == item.id){
            item.isSelect = !item.isSelect;
          }
          return item
        }
      )
    })
  }

  render() {
    const {content,list} = this.state;
    return ( 
      <div className='doList'>
        <div className="content1">
          <div className="content1-input">
            <input 
              value={content}
              type="text"
              placeholder='Add new to do...'
              autoFocus
              onChange={e=>this.handleChange(e,"content")}
            />
          </div>
          <button 
            className="content1-btn"
            type='submit' 
            onClick={this.submitContent}
          >
            Submit
          </button>
        </div>
        <ul className="content2">
          <List 
            list={list} 
            deleteContent={this.deleteContent}
            changeIsSelect={this.changeIsSelect}
          />
        </ul>
      </div>
    )
  }
}

export default App;